// 收件箱
import {lazy, useEffect, useState} from "react";
import http from "../../request/request"
import {message} from "antd"
const Viewcom = lazy(async () => import("../../components/viewcom"))
const Gundong = lazy(async ()=>import("../../components/wuxiangundong"))

let page = {p: 1, psize: 20}
let type = "收件箱"
// 邮件列表
let emaillist = []
// 过滤的条件
let filteritem = ""

function viewemail(props) {
    // 过滤后的邮件列表
    const [newlist, setnewlist] = useState([])
    // 当前点击的邮件id
    const [activeID, setactiveID] = useState("-1")
    // 当前显示的邮件内容
    const [neirong, setneirong] = useState({})
    // 翻页相关数据
    const [gundong,setgundong] = useState({
        // 初始化的loading为true，等待第一次请求完成之后，改为false
        loading:true,
        gundong:true,
    })

    // 获取邮件
    const getemaillist = () => {
        let geturl
        switch (type) {
            case "收件箱":
                geturl = http.getshoujian
                break
            case "已发送":
                geturl = http.getshoujian
                break
            case "已删除":
                geturl = http.getshoujian
                break
            case "草稿箱":
                geturl = http.getshoujian
                break
            case "收藏":
                geturl = http.getshoujian
                break
            default:
                geturl = http.getshoujian
        }
        geturl(page).then(res => {
            if(res.data.success){
                emaillist = [...emaillist,...res.data.data]
                // 判断获取的数据数量是不是满的，如果不是,说明已经全部获取了，关闭滚动加载
                if(res.data.data.length < page.psize){
                    setgundong({...gundong,gundong: false})
                }
                // 设置最大数量200，如果当前有200个邮件，就停止滚动获取
                if(emaillist.length>=200){
                    setgundong((oldvalue)=>{return {...oldvalue,gundong: false}})
                    // setgundong({...gundong,gundong: false})
                }
                getnewlist()
            }else{
                message.error(res.data.msg || "获取数据失败")
            }
            // 获取完成，关闭loading状态
            setgundong((oldvalue)=>{return {...oldvalue,loading: false}})
            console.log("是不是props变了",props.match.params)
        })
    }
    // 过滤方法
    const getnewlist = () => {
        const list = emaillist.filter(item => {
            if (filteritem === "") {
                return true
            } else {
                return item.name.indexOf(filteritem) !== -1
            }
        })
        console.log("过滤出来的数据",list,"关键字",filteritem,"原始数据",emaillist,"展示的内容",neirong,"是不是props变了",props.match.params)
        setnewlist(()=>[...list])
    }
    // 获取关键字
    const getkey = (key) => {
        filteritem = key
        getnewlist()
    }
    // 点击邮件列表的方法
    const dianji = (item) => {
        setactiveID(item.id)
        // 将被点击的邮件内容显示出来
        setneirong({...item})
    }
    // 路由参数不同代表获取的列表不同，监听路由参数变化
    const init = () => {
        console.log(props.match.params, "这次传递的参数是什么")
        emaillist = []
        page.p = 1
        type = props.match.params.type || "收件箱"
        getemaillist()
    }
    // 翻页方法,页数加1，打开loading状态
    const fanye=()=>{
        page.p = page.p + 1
        setgundong((oldvalue)=>{return {...oldvalue,loading: true}})
        getemaillist()
    }
    // 初始化方法
    useEffect(() => {
        init()
    }, [props.match.params])


    return (
        <div className="h-full w-full">
            <Viewcom emaillist={newlist} search={getkey} activeid={activeID} dianji={dianji}
                     neirong={neirong}>
                <div>
                    <Gundong loading={gundong.loading} gundong={gundong.gundong} fanye={fanye} />
                </div>
            </Viewcom>
        </div>
    )
}

export default viewemail